<template>
  <template v-if="inited">
    <el-time-picker v-model="state.value"
                    v-bind="getConfig()"
                    @change="methods.onChange"
    ></el-time-picker>
  </template>
</template>

<script>
import {CustomRenderControlMixin, defineCustomRender} from "@/plugins/form-render/utils/index.js";
import {createBaseCusCONFIG} from "@/plugins/z-frame/CusBaseEditor";
import {QuickBooleanWithNull, QuickEnums} from "@/hooks/props";

export default {
  name: 'CusTimePicker',
  mixins: [
      CustomRenderControlMixin
  ],
  CUS_TITLE: '时间',
  CUS_EDITOR: function () {
    return {
      props: {
        ...createBaseCusCONFIG(),
        // format: {
        //   type: 'string',
        //   ui: {
        //     widget: 'CusInput',
        //     label: '格式化',
        //     widgetConfig: {
        //       append: `<a class="el-link" target="_blank" href="https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi">参考</a>`
        //     }
        //   }
        // },
        format: QuickEnums(
            [
              ['时：分：秒', 'HH:mm:ss'],
              ['时：分', 'HH:mm:'],
              ['时', 'HH'],
            ],
            {
              ui: {
                label: '格式化'
              },
              widgetConfig: {
                placement: 'top-start'
              }
            }
        ),
        clearable: QuickBooleanWithNull('清除'),
        editable: QuickBooleanWithNull('输入'),
      }
    }
  },
  setup(props, ctx) {
    let { data, methods, widgetConfig2 } = defineCustomRender(props, ctx)
    let state = data();
    function getConfig() {
      let obj = state.OPT.widgetConfig
      obj.valueFormat = 'HH:mm:ss'
      return obj
    }
    return {
      state,
      widgetConfig: widgetConfig2,
      getConfig,
      methods
    }
  },
}
</script>

